<template>
	<view class="container">
		<camera device-position="back" frame-size="medium" flash="off" @error="error" :style="{height: windowHeightType + 'px'}">
			<view class="Cameratitle_Title">
				<view class="Cameratitle_Title_pop">
					<view @click="onClickicon">
						<van-icon name="arrow-left" color="#fff" size="20px" />
					</view>
					<view class="photo" @click="onClickphoto">
						相册
					</view>
				</view>
			</view>

			<view class="CameraImage">
				<image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210703/5cf27943f5195291cdfe21c142490aa3.png" mode="widthFix" class="maxImage"></image>
				<image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210703/0ffdd0b7fee72a5fc3201fb943ff841a.png" mode="widthFix" class="minImage"></image>
			</view>
			<view class="Cameratitle_box">
				<view class="Cameratitle">
					<image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210703/37c830a2376d78bf84e53a5315427445.png" mode="widthFix"></image>
				</view>
			</view>
		</camera>
		<canvas class="pose-canvas" canvas-id="pose">
		</canvas>
	</view>
</template>

<script>
	const {
		appWidth,
		appHeight
	} = getApp().globalData;
	export default {
		data() {
			return {
				windowHeightType: 0,
				predicting: false
			};
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeightType = sysInfo.windowHeight
			// console.log(this.windowHeightType)
		},
		onReady() {
			// const context = wx.createCameraContext()
			// const listener = context.onCameraFrame((frame) => {
			//   console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
			// })
			// listener.start()
			wx.showLoading({ title: '模型正在加载...' });
			const context = uni.createCameraContext();
			let count = 0;
			const listener = context.onCameraFrame(frame => {
				count++;
				if (count === 2) { // 控制帧数
					// console.log("帧数:" + count);
					this.canvasImg(frame);
					count = 0;
				}
			});
			listener.start();
			wx.hideLoading();
		},
		onHide() {
			
		},
		methods: {
			canvasImg(frame) {
				const that = this;
				if (!that.predicting) {
					that.predicting = true;
					// console.log("canvasImg:");
					var data = new Uint8Array(frame.data);
					var clamped = new Uint8ClampedArray(data);

					uni.canvasPutImageData({
						canvasId: 'pose',
						x: 0,
						y: 0,
						width: frame.width,
						height: frame.height,
						data: clamped,
						success(res) {
							// console.log("canvasPutImageData:");
							uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: frame.width,
								height: frame.height,
								canvasId: 'pose',
								success(res) {
									// console.log("canvasToTempFilePath:");
									that.uploadImg = res.tempFilePath;
									that.uploadPhoto();
								}
							})
						},
						fail(err) {
							// console.log("canvasToTempFilePath:fail");
							that.predicting = false;
						}
					}, that);
				}
			},
			error(e) {
				// console.log(e.detail);
			},
			onClickicon() {
				uni.navigateBack()
			},
			onClickphoto() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择、摄像头
					success: function(res) {
						// console.log(res.tempFilePaths.join(''));
					}
				});
			},
			uploadPhoto() {
				// console.log("uploadPhoto:");
				let self = this;
				self.$util.uploadImage('qichong-recognition/ai/animal',this.uploadImg, function(res) {
					// self.predicting = false;
					// console.log("uploadPhoto:" + res);
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;

		.CameraImage {
			height: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				position: absolute;
			}

			.maxImage {
				width: 524rpx;
				height: 524rpx;
				animation: outside 6s linear infinite;
			}

			.minImage {
				width: 454rpx;
				height: 454rpx;
				animation: outsideone 8s linear infinite;
			}
		}

		.Cameratitle_box {
			position: absolute;
			bottom: 80rpx;
			padding: 0 25rpx;

			.Cameratitle {
				width: 702rpx;
				height: 183rpx;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.Cameratitle_Title {
			width: 100%;
			position: absolute;
			z-index: 999;
			top: 150rpx;

			.Cameratitle_Title_pop {
				display: flex;
				justify-content: space-between;
				padding: 0px 20px;

				.photo {
					border: 1px solid #fff;
					padding: 2px 15px;
					line-height: 20px;
					border-radius: 20px;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

	}

	@keyframes outside {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes outsideone {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(-360deg);
		}
	}

	.pose-canvas {
		position: absolute;
		top: -999rpx;
		left: -999rpx;
	}
</style>
